<template>
  <div class="duoyu">
    <div class="Box1">
      <div class="box1">
        <div class="frist" @click="tiaozhuan0()">果实蔬菜</div>
        <div
          v-for="item in arr1"
          :class="item.class"
          :key="item.id"
          class="text"
          @click="tiaozhuan1(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="xian"></div>

    <div class="Box1">
      <div class="box1">
        <div class="frist" @click="tiaozhuan0(item)">根茎蔬菜</div>
        <div
          v-for="item in arr2"
          :class="item.class"
          :key="item.id"
          class="text"
          @click="tiaozhuan2(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="xian"></div>
    <div class="Box1">
      <div class="box1">
        <div class="frist" @click="tiaozhuan0(item)">菌菇类</div>
        <div
          v-for="item in arr3"
          :class="item.class"
          :key="item.id"
          class="text"
          @click="tiaozhuan3(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="xian"></div>
    <div class="Box1">
      <div class="box1">
        <div class="frist" @click="tiaozhuan0(item)">叶类蔬菜</div>
        <div
          v-for="item in arr4"
          :class="item.class"
          :key="item.id"
          class="text"
          @click="tiaozhuan4(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr1: [
        { name: "茄子", class: "a0", id: 0 },
        { name: "番茄", class: "a1", id: 1 },
        { name: "玉米", class: "a2", id: 2 },
        { name: "南瓜", class: "a3", id: 3 },
        { name: "丝瓜", class: "a4", id: 4 },
        { name: "冬瓜", class: "a5", id: 5 },
        { name: "豆角", class: "a6", id: 6 },
        { name: "更多", class: "a7", id: 7 },
      ],
      arr2: [
        { name: "土豆", class: "a0", id: 0 },
        { name: "萝卜", class: "a1", id: 1 },
        { name: "藕", class: "a2", id: 2 },
        { name: "山药", class: "a3", id: 3 },
        { name: "笋", class: "a4", id: 4 },
        { name: "红薯", class: "a5", id: 5 },
        { name: "芋头", class: "a6", id: 6 },
        { name: "更多", class: "a7", id: 7 },
      ],
      arr3: [
        { name: "香菇", class: "a0", id: 0 },
        { name: "杏鲍菇", class: "a1", id: 1 },
        { name: "金针菇", class: "a2", id: 2 },
        { name: "木耳", class: "a3", id: 3 },
        { name: "茶树菇", class: "a4", id: 4 },
        { name: "猴头菇", class: "a5", id: 5 },
        { name: "平菇", class: "a6", id: 6 },
        { name: "更多", class: "a7", id: 7 },
      ],
      arr4: [
        { name: "韭菜", class: "a0", id: 0 },
        { name: "菠菜", class: "a1", id: 1 },
        { name: "圆白菜", class: "a2", id: 2 },
        { name: "油菜", class: "a3", id: 3 },
        { name: "娃娃菜", class: "a4", id: 4 },
        { name: "空心菜", class: "a5", id: 5 },
        { name: "油麦菜", class: "a6", id: 6 },
        { name: "更多", class: "a7", id: 7 },
      ],
    };
  },
  methods: {
    tiaozhuan0(id) {
      alert("刘毅");
    },
    tiaozhuan1(id) {
      console.log(id);
    },
    tiaozhuan2(id) {
      console.log(id);
    },
    tiaozhuan3(id) {
      console.log(id);
    },
    tiaozhuan4(id) {
      console.log(id);
    },
  },
};
</script>

<style scoped="scoped">
.duoyu {
  position: relative;
  color: black;
}
.Box1 {
  /* background-color: red; */
  width: 350px;
  height: 65px;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
}
.frist {
  position: absolute;
  left: -69px;
  width: 70px;
  height: 20px;
}
.frist:hover {
  color: orangered;
}
.box1 {
  width: 270px;
  height: 50px;
  position: absolute;
  left: 80px;
  top: 0px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.text {
  width: 64px;
  height: 17px;
  
}
.text:hover {
  color: orangered;
}
.xian {
  width: 339px;
  height: 1px;
  background-color: black;
  margin: 0 auto;
  opacity: 0.2;
}
</style>